/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet, StyleProp, ViewStyle, TextStyle } from 'react-native';

const DEFAULT_CLOSE_BUTTON_COLOR = '#0F294D';

export interface AdaptiveSideSheetHeaderProps {
  title?: string;

  height?: number;

  topInset?: number;

  leftButton?: React.ReactNode;

  rightButton?: React.ReactNode;

  onLeftPress?: () => void;

  onRightPress?: () => void;

  titleStyle?: StyleProp<TextStyle>;

  containerStyle?: StyleProp<ViewStyle>;

  leftButtonStyle?: StyleProp<ViewStyle>;

  rightButtonStyle?: StyleProp<ViewStyle>;

  closeButtonColor?: string;
}

const DefaultCloseIcon = React.memo<{ color?: string }>(({ color = DEFAULT_CLOSE_BUTTON_COLOR }) => <Text style={[styles.closeIcon, { color }]}>×</Text>);
const AdaptiveSideSheetHeaderComponent: React.FC<AdaptiveSideSheetHeaderProps> = ({
  title,
  height = 52,
  topInset = 0,
  leftButton,
  rightButton,
  onLeftPress,
  onRightPress,
  titleStyle,
  containerStyle,
  leftButtonStyle,
  rightButtonStyle,
  closeButtonColor = DEFAULT_CLOSE_BUTTON_COLOR,
}) => {
  return (
    <View style={[styles.container, { height, paddingTop: topInset }, containerStyle]}>
      <View style={styles.leftButtonContainer}>
        {leftButton && (
          <TouchableOpacity onPress={onLeftPress} style={[styles.leftButton, leftButtonStyle]}>
            {leftButton}
          </TouchableOpacity>
        )}
      </View>

      <View style={styles.titleContainer}>
        <Text style={[styles.title, titleStyle]} numberOfLines={1}>
          {title}
        </Text>
      </View>

      {/* Right button (default: close button) - 固定宽度 */}
      <View style={styles.rightButtonContainer}>
        <TouchableOpacity onPress={onRightPress} style={[styles.rightButton, rightButtonStyle]}>
          {rightButton || <DefaultCloseIcon color={closeButtonColor} />}
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  closeIcon: {
    fontSize: 48,
    fontWeight: '300',
    lineHeight: 40,
  },
  container: {
    alignItems: 'center',
    backgroundColor: '#ffffff',
    borderBottomColor: '#e0e0e0',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderTopLeftRadius: 8,
    flexDirection: 'row',
    paddingHorizontal: 16,
  },
  leftButton: {
    alignItems: 'center',
    height: 40,
    justifyContent: 'center',
    width: 40,
  },
  leftButtonContainer: {
    alignItems: 'flex-start',
    height: 48,
    justifyContent: 'center',
    width: 48,
    flexShrink: 0, // 防止收缩
  },
  rightButton: {
    alignItems: 'center',
    height: 48,
    justifyContent: 'center',
    width: 48,
  },
  rightButtonContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 48, // 固定宽度，避免布局抖动
    flexShrink: 0, // 防止收缩
  },
  title: {
    color: '#000',
    fontSize: 17,
    fontWeight: '600',
    textAlign: 'center',
  },
  titleContainer: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 8,
  },
});

const AdaptiveSideSheetHeader = React.memo(AdaptiveSideSheetHeaderComponent, (prevProps, nextProps) => {
  // 只有这些 props 变化时才重新渲染
  return (
    prevProps.title === nextProps.title &&
    prevProps.height === nextProps.height &&
    prevProps.topInset === nextProps.topInset &&
    prevProps.closeButtonColor === nextProps.closeButtonColor &&
    prevProps.leftButton === nextProps.leftButton &&
    prevProps.rightButton === nextProps.rightButton &&
    prevProps.titleStyle === nextProps.titleStyle &&
    prevProps.containerStyle === nextProps.containerStyle &&
    prevProps.leftButtonStyle === nextProps.leftButtonStyle &&
    prevProps.rightButtonStyle === nextProps.rightButtonStyle
  );
});

export default AdaptiveSideSheetHeader;
